<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>腕带挂失</title>
		<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/layui.css}" />
	<script type="text/jscript" th:src="@{/plugin/layui/layui.js}" charset="UTF-8"></script>
		<script type="text/jscript" th:src="@{/plugin/jquery.min.js}"></script>
<script>
<!--翻页  -->
function paging(args){
	//alert(args);
	var wriststrp_id=$("#wriststrp_id").val();
	var pageNum=$("#text").val();
	var total=$("#totalpage").val();

	//改变后的页面
	var page=parseInt(pageNum)+args;
	
	if(page<1||page>total){
		return;	
	}
	//刷新页面
	getpagebean(wriststrp_id,page);
	
}	
<!-- 读取pagebean的方法 -->
function getpagebean(wriststrp_id,pageNum){
	
	//加载该对象的资金变动情况
	$.post("[[@{/balanceChange}]]",
			{
		"wriststrp_id": wriststrp_id,
		"pageNum": pageNum,
		"size" : 8
			},
			function(pageBean){
				if(pageBean==""||pageBean.beanList==null){
					alert("未能查询到数据");
					return;
				}
				//获取内容集合
				var data=pageBean.beanList;
				
				if(data!=""){
		
					//拼标签显示消费项
					var content="";
					//支付类型
					var type="";
					
			$.each(data,function(index,obj){
				if(obj.charge_type==1){
					type="现金充值";
				};
				if(obj.charge_type==2){
					type="支付宝充值";
				};
				if(obj.charge_type==3){
					type="腕带押金"; 
				};
				if(obj.charge_type==4){
					type="商品消费 "; 
				};
				content +=		
				'<tr ><td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">'
				+(index+1)
				+'</td><td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">'
				+ (obj.amount>0 ? (("+")+obj.amount) : obj.amount)
				+'</td><td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">'
				+ type
				+'</td><td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">'
				+"水公园" 
				+'</td><td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">'
				+obj.create_time
				+'</td></tr>'	;
					});	
			
			//显示到表格
			$("#content").html(content);
			//分页菜单
			
			var pagecontent=
				'<a href="javaScript:paging(-1)" >上一页</a> '
			+' 第 <span>'
			+pageBean.pageIndex+'/'+pageBean.totalPage+'</span>页 '
			+' <a href="javaScript:paging(1)" >下一页</a>';
			//翻页菜单
			$("#pagemenu").html(pagecontent);
			
			//当前页码
			$("#text").val(pageBean.pageIndex);
			
			$("#totalpage").val(pageBean.totalPage);
		
					return;
				}
				alert("当前腕带信息未找到，请联系管理员 ");
			}
	);
	return;
	
}



//营业时间

		function showTime() {
 		var	nowtime = new Date();
 		var	year = nowtime.getFullYear();
 		var	month = nowtime.getMonth() + 1;
 		var	date = nowtime.getDate();
			$("#mytime").html(year + "年" + month + "月" + date +"日");
			$("#mytime2").html("营业时间：" +nowtime.toLocaleTimeString());
		};

		$(function(){

		setInterval("showTime()", 1000);


		})

		<!-- 模拟按键功能，点击div变小-->
		$(function() {
			
			//查询
			$("#query").mousedown(function(){
				$("#query").css("font-size","20px");
				$("#query i").css("font-size","20px");
			});
			$("#query").mouseup(function(){
				$("#query").css("font-size","25px");
				$("#query i").css("font-size","25px");
				
				if($("#typename").val()!="请读取腕带"){
					//加载该对象的资金变动情况
					var wriststrp_id=$("#wriststrp_id").val();
					var pageNum=$("#text").val();
				getpagebean(wriststrp_id,pageNum);
				}else{
					alert("请先读取腕带信息再进行查询");
				}
			});
			
			//挂失
			$("#loss").mousedown(function(){
				$("#loss").css("font-size","20px");
				$("#loss i").css("font-size","20px");
				
				
			});
			$("#loss").mouseup(function(){
				$("#loss").css("font-size","25px");
				$("#loss i").css("font-size","25px");
				
				if($("#state").val()=="正在使用"){
					//执行挂失
						$.post("[[@{/doloss}]]",
							{
						wriststrp_id: $("#wriststrp_id").val()
							},
							function(data){
					if(data==""){
					alert("腕带状态异常，请稍后再试");return;
				};
				
				alert(data);
				getmes();
				//location.reload();
							
					});
				}else{
					alert("该腕带状态不能办理挂失 "); 
				}
			});
			
			//解锁
			$("#unlock").mousedown(function(){
				$("#unlock").css("font-size","20px");
				$("#unlock i").css("font-size","20px");
			});
			$("#unlock").mouseup(function(){
				$("#unlock").css("font-size","25px");
				$("#unlock i").css("font-size","25px");
				
				if($("#state").val()=="挂失状态"){
					//执行挂失
						$.post("[[@{/doUnlock}]]",
							{
						wriststrp_id: $("#wriststrp_id").val()
							},
							function(data){
					if(data==""){
					alert("腕带状态异常，请稍后再试");return;
				};
				
				alert(data);
				getmes();
				//location.reload();
							
					});
				}else{
					alert("该腕带信息不能办理解锁业务"); 
		
				}
			});

			//关闭
			$("#exit").mousedown(function(){
				$("#exit").css("font-size","20px");
				$("#exit i").css("font-size","20px");
			});
			$("#exit").mouseup(function(){
				$("#exit").css("font-size","25px");
				$("#exit i").css("font-size","25px");
			});


		
		
		
		
		
		
		//点击读取腕带信息
		$("#readmes").mousedown(function() {

			$("#readmes").css("font-size", "15px");
		});
		$("#readmes").mouseup(function() {

			$("#readmes").css("font-size", "18px");

			if ($("#wriststrp_id").val() == "") {

				alert("腕带编号不能为空");
				return;
			}
			getmes();
		
		});

	})
	
	function getmes(){
			$.post("[[@{/getCurrentMsg}]]", {
				wriststrp_id : $("#wriststrp_id").val()
			},

			function(data) {

				if (data == "") {
					alert("该腕带处于非使用状态");
					$("#typename").val("请读取腕带");
					$("#amount").val("");
					$("#tel").val("");
					$("#state").val("请读取腕带");
					return;
				}
				var state="";
				if(data.state==1){
					state="正在使用";
				};
				if(data.state==2){
					state="挂失状态"; 
				}
				$("#typename").val(data.type_name);
				$("#amount").val(data.balance);
				$("#tel").val(data.tel);
				$("#state").val(state);
				
			})
		}
</script>
</head>
<body>
	<input  type="hidden" id="text">
	<input  type="hidden" id="totalpage">
	<!--最外层容器控制位置-->
	<div id="" class="container" style="height: 500px; margin: 30px 100px;">
		<div id="" class="layui-row ">

			<!--  左边操作功能模块-->
			<div id="" class="layui-col-md12 layui-bg-gray"
				style="height: 500px;">
				<div id="" class="layui-row ">
					<!-- 左侧菜单框-->
					<div id="" class="layui-col-md10 " style="height: 500px;">
						<!-- 印刷号 -->
						<div id="" class="layui-col-md12"
							style="border: #40AFFE 2px solid; background-color: white; height: 120px;">

							<div id="" class="layui-col-md6"
								style="height: 40px; text-align: center; line-height: 40px; font-size: 18px; color: red;">
								<div id="" class="layui-col-md6" style="text-align: right;">
									印&nbsp;刷&nbsp;号：</div>
								<div id="" class="layui-col-md6" style="text-align: left;">
									<input id="wriststrp_id" type="text" size="10"
										; style="color: red;" />
								</div>
							</div>
							<div id="" class="layui-col-md6"
								style="height: 40px; text-align: center; line-height: 40px; font-size: 18px;">
								<div id="readmes" class="layui-col-md4"
									style="margin-left: 180px; background-color: #007DDB; text-align: center;">
									读&nbsp;取&nbsp;腕&nbsp;带</div>
							</div>

							<div id="" class="layui-col-md6"
								style="height: 40px; text-align: center; line-height: 40px; font-size: 18px;">
								<div id="" class="layui-col-md6" style="text-align: right;">
									腕&nbsp;带&nbsp;类&nbsp;型：</div>
								<div id="" class="layui-col-md6" style="text-align: left;">
									<input id="typename" type="text" size="10" value="请读取腕带"
										readonly="readonly" style="background-color: #D0D0D0;" />
								</div>
							</div>
							<div id="" class="layui-col-md6"
								style="height: 40px; text-align: center; line-height: 40px; font-size: 18px;">
								<div id="" class="layui-col-md6" style="text-align: right;">
									可&nbsp;用&nbsp;金&nbsp;额：</div>
								<div id="" class="layui-col-md6" style="text-align: left;">
									<input id="amount" type="text" size="10" ; />
								</div>
							</div>

							<div id="" class="layui-col-md6"
								style="height: 40px; text-align: center; line-height: 40px; font-size: 18px;">
								<div id="" class="layui-col-md6" style="text-align: right;">
									腕&nbsp;带&nbsp;状&nbsp;态：</div>
								<div id="" class="layui-col-md6" style="text-align: left;">
									<input id="state" type="text" size="10" value="请读取腕带"
										readonly="readonly" style="background-color: #D0D0D0;" />
								</div>
							</div>
							<div id="" class="layui-col-md6"
								style="height: 40px; text-align: center; line-height: 40px; font-size: 18px;">
								<div id="" class="layui-col-md6" style="text-align: right;">
									手&nbsp;机&nbsp;号&nbsp;码：</div>
								<div id="" class="layui-col-md6" style="text-align: left;">
									<input id="tel" type="text" size="10" ; />
								</div>
							</div>
						</div>
						<!-- 消费项目列表 -->
						<div id="" class="layui-col-md12"
							style="margin-top: 5px; background-color: #93D1FF; font-size: 20px; height: 30px;">
							&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-list"
								style="font-size: 20px;"></i>消费项目列表
						</div>
						<div id="" class="layui-col-md12">
							<table border="1px" bordercolor="#f2f2f2" width="100%">
								<tr bgcolor="#007DDB">
									<td class="layui-col-md3"
										style="height: 30px; text-align: center; line-height: 30px;">消费编号</td>
									<td class="layui-col-md2"
										style="height: 30px; text-align: center; line-height: 30px;">金额</td>
									<td class="layui-col-md2"
										style="height: 30px; text-align: center; line-height: 30px;">交易类型</td>
									<td class="layui-col-md2"
										style="height: 30px; text-align: center; line-height: 30px;">商户名称</td>
									<td class="layui-col-md3"
										style="height: 30px; text-align: center; line-height: 30px;">时间</td>
								</tr>
								<tbody id="content">

								</tbody>
							</table>
						</div>
						<!-- 翻页 -->
							<div id="pagemenu" class="layui-col-md12"  style=" position:absolute; text-align:center; font-size:20px;  bottom:20px; ">
							</div>
					</div>

					<!-- 右侧菜单-->
					<div id="" class="layui-col-md2" style="height: 500px;">
						<div id="" style="width: 100%; color: white; text-align: center;">

							<div id="query" onmousedown="dosome(1)" onmouseup="dother(1)"
								style="text-align: center; background-color: #01AAED; font-size: 25px; margin: 15px; border: #009688 1px solid; width: 75%; height: 75px; line-height: 75px;">
								<i class="layui-icon layui-icon-search" style="font-size: 25px;"></i>
								查询
							</div>
							<div id="loss" onmousedown="dosome(2)" onmouseup="dother(2)"
								style="text-align: center; background-color: #00FF00; font-size: 25px; margin: 15px; border: #009688 1px solid; width: 75%; height: 75px; line-height: 75px;">
								<i class="layui-icon layui-icon-util" style="font-size: 25px;"></i>挂失
							</div>
							<div id="unlock" onmousedown="dosome(3)" onmouseup="dother(3)"
								style="text-align: center; background-color: #00FFFF; font-size: 25px; margin: 15px; border: #009688 1px solid; width: 75%; height: 75px; line-height: 75px;">
								<i class="layui-icon layui-icon-password"
									style="font-size: 25px;"></i>解锁
							</div>
							<div id="exit" onmousedown="dosome(4)" onmouseup="dother(4)"
								style="text-align: center; background-color: #FF5722; font-size: 25px; margin: 15px; border: #009688 1px solid; width: 75%; height: 75px; line-height: 75px;">
								<i class="layui-icon layui-icon-close-fill"
									style="font-size: 25px;"></i>关闭
							</div>
						</div>



						</table>
					</div>
				</div>


			</div>
		</div>
		<!-- 页脚-->
				<div class="layui-row layui-bg-gray" style="text-align: center;">
					<div id="mytime" class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> </div>
					<div class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> 操作用户：yanhui</div>
					<div id="mytime2"  class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"></div>
					<div class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> 某某游乐园</div>
				</div>
	</div>

	</div>

</body>
</html>
